<div class="modal fade" id="add_query_dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" ng-disabled="saveInProgress" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Add Widget</h4>
            </div>
            <div class="modal-body">
                <p class="btn-group">
                    <button type="button" class="btn btn-default" ng-class="{active: isVisualization()}" ng-click="setType('visualization')">Visualization</button>
                    <button type="button" class="btn btn-default" ng-class="{active: isTextBox()}" ng-click="setType('textbox')">Text Box</button>
                </p>

                <div ng-show="isTextBox()">
                    <div class="form-group">
                        <textarea class="form-control" ng-model="text" rows="3"></textarea>
                    </div>
                    <div ng-show="text">
                        <strong>Preview:</strong>
                        <p ng-bind-html="text | markdown"></p>
                    </div>
                </div>

                <div ng-show="isVisualization()">
                    <div class="form-group">
                        <ui-select ng-model="query.selected" theme="bootstrap" reset-search-input="false">
                            <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="q in queries"
                                               refresh="searchQueries($select.search)"
                                               refresh-delay="0">
                                <div ng-bind-html="q.name | highlight: $select.search | trustAsHtml"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>

                    <div ng-show="selected_query">
                        <div class="form-group">
                            <label for="">Choose Visualization</label>
                            <select ng-model="selectedVis" ng-options="vis as vis.name group by vis.type for vis in selected_query.visualizations" class="form-control"></select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="">Widget Size</label>
                    <select class="form-control" ng-model="widgetSize"
                            ng-options="c.value as c.name for c in widgetSizes"></select>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-disabled="saveInProgress" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" ng-disabled="saveInProgress || !(selectedVis || isTextBox())" ng-click="saveWidget()">Add to Dashboard</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
